<html xmlns:th="http://www.thymeleaf.org">
	<head>
        <title>快付宝</title>
		<meta charset="UTF-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no,minimal-ui">
        <link rel="shortcut icon" href="http://mifiweb.chenlingkeji.com/img/bitbug_favicon.ico" type="image/x-icon" />
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			header {
				text-align: center;
			}

			body {
				width: 100%;
			}

			.dingbu_hong {
				width: 100%;
			}

			.logo_tu {
				width: 10rem;
				margin-top: -6.9rem;
			}

			.logo_zi {
				width: 15.375rem;
				margin-top: 1rem;
			}

			.input_dev {
				margin-top: 0.125rem;
			}

			.input_dev_qsrsjh {
				background-color: #F9F9FB;
				border-radius: 1rem;
				height: 7.975em;
				margin: 0 6.6875rem 0 6.6875rem;
			}

			.dev_qsrsjh_span {
				overflow-wrap: break-word;
				color: rgba(3, 0, 0, 1);
				font-size: 2.875rem;
				font-family: SourceHanSansCN-Regular;
				font-weight: NaN;
				text-align: right;
				white-space: nowrap;

				line-height: 8rem;
				margin: 0 0 0 2.875rem;
			}

			.input_qsrsjh {

				overflow-wrap: break-word;
				color: rgba(0, 0, 0, 1.0);
				background-color: #F9F9FB;
				font-size: 2.9375rem;
				font-family: SourceHanSansCN-Regular;
				font-weight: NaN;
				text-align: left;
				width: 65%;
				border: none;
				outline: none;
				white-space: nowrap;
				margin: 0 0 0 3.25rem;
			}

			.input_yzm {
				width: 58%;
				overflow-wrap: break-word;
				color: rgba(0, 0, 0, 1.0);
				background-color: #F9F9FB;
				font-size: 2.9375rem;
				font-family: SourceHanSansCN-Regular;
				font-weight: NaN;
				text-align: left;
				white-space: nowrap;
				border: none;
				outline: none;
				margin: 0 0 0 2.875rem;
			}

			.span_yzm {
				width: 188px;
				overflow-wrap: break-word;
				color: rgba(222, 77, 50, 1);
				font-size: 2.1875rem;
				font-family: SourceHanSansCN-Regular;
				font-weight: NaN;
				text-align: right;
				white-space: nowrap;
				line-height: 8rem;
				margin: 0 0 0 1.75rem;
			}

			.input_dev_ty {
				background-color: #F9F9FB;
				border-radius: 1rem;
				height: 7.975em;
				margin: 2.5625rem 6.6875rem 0 6.6875rem;
			}

			.input_ty {
				width: 90%;
				overflow-wrap: break-word;
				color: rgba(0, 0, 0, 1.0);
				background-color: #F9F9FB;
				font-size: 2.9375rem;
				font-family: SourceHanSansCN-Regular;
				font-weight: NaN;
				text-align: left;
				white-space: nowrap;
				border: none;
				outline: none;
				line-height: 8rem;
				margin: 0 0 0 2.875rem;
			}

			.button_1 {
				background-color: rgba(242, 70, 25, 1);
				border-radius: 1.125rem;
				height: 7.975em;
				margin: 0 4.625rem 0 4.625rem;
				text-align: center;
			}

			.text_11 {
				height: 2.5625rem;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 2.5625rem;
				font-family: SourceHanSansCN-Regular;
				font-weight: NaN;
				text-align: right;
				white-space: nowrap;
				line-height: 7.9375rem;
			}












			.dialog-box {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				-ms-flex-direction: row;
				flex-direction: row;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
			}

			.dialog-box {
				position: fixed;
				z-index: 99;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}

			.dialog-box .container {
				font-size: 2.5rem;
				color: #fff;
				padding: 2.25rem;
				background: #000;
				opacity: .65;
				border-radius: 1rem;
			}
		</style>

	</head>
	<body>
		<header>
			<img src="http://mifiweb.chenlingkeji.com/img/dingbu_hong.png" class="dingbu_hong" />
			<div>
				<img src="http://mifiweb.chenlingkeji.com/img/logo_tu.png" class="logo_tu" />
			</div>
			<img src="http://mifiweb.chenlingkeji.com/img/logo_zi.png" class="logo_zi" />
		</header>
		<div calss="input_dev">
			<!-- 请输入手机号开始 -->
			<div class="input_dev_qsrsjh">
				<span class="dev_qsrsjh_span">+86</span>
				<input class="input_qsrsjh" onblur="checkMobile()" id="phone" onkeyup="this.value=this.value.replace(/\D/g,'')"
					onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="11" minlength="11"  placeholder="请输入手机号" />
			</div>
			<!-- 请输入手机号结束 -->
			<!-- 验证码开始 -->
			<div class="input_dev_ty">
				<input type="number" class="input_yzm" id="code" maxlength="4" minlength="4"  placeholder="请输入验证码" />
				<span style="line-height: 8rem;  font-size: 4rem;margin: 0 0 0 0;">|</span>
				<span class="span_yzm" id="reg_mescode_btn"  able="able">获取验证码</span>
			</div>
			<!-- 验证码结束 -->
			<!-- 请输入6到12位的密码开始 -->
			<div class="input_dev_ty">
				<input type="password" class="input_ty" id="password" onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="12" minlength="6" onblur="checkPwd()" placeholder="请输入6到12位的密码" />
			</div>
			<!-- 请再次输入密码开始 -->
			<div class="input_dev_ty">
				<input type="password" class="input_ty" id="repassword" onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" maxlength="12" minlength="6" onblur="checkRePwd()"  placeholder="请再次输入密码" />
			</div>
			<!-- 邀请码开始 -->
			<div class="input_dev_ty">
				<input class="input_ty" disabled="disabled" id="yqm" placeholder="请输入邀请码" th:phoneCode="${code}" th:value="${phone}"/>
			</div>
			<div style="font-size: 1.9375rem;text-align: center;margin-top: 5rem;">
				<input type="checkbox" id="option1" name="options" value="option1"
					style="width: 1.9375rem;height: 1.9375rem;line-height: 1.9375rem;">
				<label for="option1">点击注册，即表示您已阅读并同意</label>
				<label for="option1" style="color: #F24619;" onclick="location='/app/register/toServer'">《快付宝服务协议》</label>
			</div>
		</div>
		<div style="margin-top: 3.75rem">
			<div class="button_1 " id="tijiao"  able="able">
				<span class="text_11">提交注册</span>
			</div>
		</div>
		<div style="margin-top: 2.875rem;margin-bottom: 6.3125rem;">
			<div class="button_1 " id="xiazia">
				<span class="text_11">已有账号，直接下载</span>
			</div>
		</div>

		<div class="dialog-box" style="display: none;">
			<div class="container">操作成功</div>
		</div>

	</body>
	<script src="http://mifiweb.chenlingkeji.com/js/jquery-3.7.1.min.js"></script>

	<script>
		function showAD(msg) {
			$(".container").text(msg);
			$(".dialog-box").show();
			setTimeout("hideAD()", 1500);
		}

		function hideAD() {
			$(".dialog-box").hide();
		}

		//检查手机号
		function checkMobile() {
			var _phone = $("#phone").val();
			if (!(/^1[3|4|5|8][0-9]\d{8}$/.test(_phone))) {
				showAD("请输入正确的手机号");
				return false;
			}
			return true;
		}
		function checkCode(){
			let code =$("#code").val();
			if(code==undefined||code==null||code==''){
				showAD("验证码不能为空");
				return false;
			}
			return true;
		}
		function checkYqm(){
			let code =$("#yqm").val();
			if(code==undefined||code==null||code==''){
				showAD("邀请码不能为空");
				return false;
			}
			return true;
		}
		function checkRePwd(){
			let pwd =$("#password").val();
			let repwd =$("#repassword").val();
			if(pwd!=repwd){
				showAD("两次输入的密码不一致");
				return false;
			}
			return true;
		}
		function checkPwd(){
			let pwd = $("#password").val();
			 if(pwd==undefined||pwd==null||pwd==''){
			 	showAD("密码不能为空");
			 	return false;
			 }
			// 在这里添加检测密码强度的逻辑
			let len = pwd.length;
			let isStr = /[a-zA-Z]/.test(pwd);
			let isNum =  /\d/.test(pwd);
			let isSym = /[^a-zA-Z0-9]/.test(pwd);

			let passwordStrength = '';
			if (isStr && isNum && isSym && len >= 6) {
			    passwordStrength = '高';
			} else if (isStr && isNum && len >= 6) {
			    passwordStrength = '中';
			} else {
			    passwordStrength = '低';
				showAD("密码强度太低，请重新输入");
				return false;
			}
			return true;
		}
		function checkOption(){
			var isChecked=$("#option1").prop("checked");
			if(!isChecked){
				showAD("尚未同意快付宝服务协议");
				return false;
			}
			return true;
		}
		var mesdong=null;
		var mestime=60;
		$("#reg_mescode_btn").click(function(){
		    if($(this).attr('able')=="able") {
		        // 1. 校验数据(比如手机号是否填写)
				var _phone = $("#phone").val();
				if(checkMobile()){
					// 2. 通过验证,执行倒计时60秒
					$(this).attr('able',"disable");
					$(this).css('cursor','not-allowed');
					$(this).html(mestime+"秒后重发");
					mesdong = setInterval(function() {
					    mestime-=1;
					    if(mestime<0){
					        $("#reg_mescode_btn").attr('able',"able");
					        $("#reg_mescode_btn").css('cursor','pointer');
					        $("#reg_mescode_btn").html('获取验证码');
					        mestime=60;
					        clearInterval(mesdong);
					    }else{
					        $("#reg_mescode_btn").html(mestime+"秒后重发");
					    };
					}, 1000);
                    $.post("/app/register/sendCodeMsg?phones="+_phone,
                        function(data,state){
                            //这里显示从服务器返回的数据
                            console.log(data);
                            showAD("已发送验证码，验证码两分钟内有效");
                        },"json");
				}
		    }
		})
		$("#tijiao").click(function(){
            if($("#tijiao").attr('able')=="able") {
                if(checkMobile()&&checkCode()&&checkPwd()&&checkRePwd()&&checkYqm()&&checkOption()){
                    $("#tijiao").attr('able',"disable");
                    $("#tijiao").css('cursor','not-allowed');
                    var phone=$("#phone").val();
                    var code=$("#code").val();
                    var password=$("#password").val();
                    var yqm=$("#yqm").attr("phoneCode");
                    $.post("/app/register/registerAppUser?phone="+phone+"&code="+code+"&password="+password+"&yqm="+yqm,
                        function(data,state){
                            //这里显示从服务器返回的数据
                            console.log(data);
                            if(data.code==200){
                                $(".container").text(data.msg);
                                $(".dialog-box").show();
                            }else{
                                showAD(data.msg);
                                $("#tijiao").attr('able',"able");
                                $("#tijiao").css('cursor','pointer');
                            }
                        },"json");
                }
            }
		});
	</script>
	<script>
		var baseFont = function() {
			var baseSize = 16; // 设置1rem = 100px(设计稿);
			var baseWidth = 1080; // 640 750 1080
			let clientWidth = document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth;
			var fontSize = (clientWidth / baseWidth * baseSize).toFixed(2);
			document.getElementsByTagName("html")[0].style.fontSize = fontSize + "px";
		}
		let _this = this;
		window.onresize = () => {
			if (_this.resizeFlag) {
				clearTimeout(_this.resizeFlag);
			}
			_this.resizeFlag = setTimeout(() => {
				baseFont();
				_this.resizeFlag = null;
			}, 100);
		};
		baseFont();
	</script>
</html>
